import React, {Component} from 'react';
import {observer, inject} from 'mobx-react'
import {List, Button, Flex, Radio} from 'antd-mobile';

const RadioItem = Radio.RadioItem;

@inject('propertyFeePayStore')
@observer
class PropertyFeePay extends Component {

    componentDidMount() {
        this.props.propertyFeePayStore.componentDidMount(this.props);
    }

    generatingUrl = (data) => {
        let urlData = [];
        for (const i in data) {
            urlData.push({
                url: data[i],
                id: Math.random().toString(36).substr(3)
            });
        }
        return urlData;
    };

    render() {
        const {payType, onChangePayType, paySubmit, payments, actualPayments, attach, attach2, detail} = this.props.propertyFeePayStore;
        const data = [
            {payType: 'wx_app', label: '微信手机支付', thumb: '/pages/mobile/car/image/weixin.png'},
            {payType: 'ali_app', label: '支付宝手机支付', thumb: '/pages/mobile/car/image/zhifubao.png'},
        ];
        return (<div>
                <div style={{backgroundColor: '#fff', padding: 20}}>
                    <div style={{fontSize: 17, fontWeight: 'bold'}}>订单金额</div>
                    <div style={{paddingTop: 20}}>
                        <div style={{float: 'left', fontSize: 17, color: '#FF5F4D', fontWeight: 'bold'}}>
                            ￥
                        </div>
                        <div style={{marginLeft: 30, fontSize: 30, color: '#FF5F4D', fontWeight: 'bold'}}>
                            {payments.toFixed(2)}
                        </div>
                    </div>
                </div>
                <List renderHeader={() => '第三方支付'}>
                    {data.map(i => (
                        <RadioItem
                            style={{minHeight: 54}}
                            key={i.payType}
                            checked={payType === i.payType}
                            onChange={() => onChangePayType(i.payType)}
                            thumb={i.thumb}
                        >
                            {i.label}
                        </RadioItem>
                    ))}
                </List>

                <div style={{
                    width: '100%',
                    position: 'fixed',
                    bottom: 0
                }}>
                    <Flex>
                        <Flex.Item>
                            <div style={{
                                backgroundColor: '#fff',
                                height: '47px',
                                color: '#FF5F4D',
                                fontSize: 17,
                                fontWeight: 'bold',
                                paddingRight: 15,
                                textAlign: 'right',
                                lineHeight: '47px'
                            }}> ￥ {actualPayments.toFixed(2)}
                            </div>
                        </Flex.Item>
                        <Flex.Item>
                            {payType === 'wx_app' ?
                                <Button className="am-button-submit"
                                        onClick={() => paySubmit(this.props)}>确认支付</Button>
                                : <form action="/api/v2/pay/anon/alipay/H5/order">
                                    <input type="hidden" name="ownerCode" value={ownerCode}/>
                                    <input type="hidden" name="commCode" value={commCode}/>
                                    <input type="hidden" name="totalFee" value="0.01"/>
                                    <input type="hidden" name="payableFee" value={payments}/>
                                    <input type="hidden" name="orderType" value="PROPERTY_FEE"/>
                                    <input type="hidden" name="body" value="物业缴费"/>
                                    <input type="hidden" name="detail" value={detail}/>
                                    <input type="hidden" name="attach" value={attach}/>
                                    <input type="hidden" name="attach2" value={attach2}/>
                                    <div style={{
                                        width: '100%',
                                        position: 'fixed',
                                        bottom: 0
                                    }}>
                                        <button type="submit" className="am-button am-button-submit"
                                                style={{width: '50%'}}>
                                            确定支付
                                        </button>
                                    </div>
                                </form>}
                        </Flex.Item>
                    </Flex>
                </div>

                <style>
                    {
                        `.am-button-submit {
                            color: #fff;
                            background-color: #619EEF;
                            border-radius: 0px;
                        }
                        html:not([data-scale]) .am-button::before {
                            border: none;
                        }
                        .am-flexbox .am-flexbox-item {
                            margin-left: 0px;
                        }
                        .am-list-item img {
                            width: 32px;
                            height: 32px;
                        }
                       `
                    }
                </style>
            </div>
        );
    }
}

export default PropertyFeePay;